<template>
  <div class="wrap">
    <div class="header">
      <div class="goback">
        <van-icon name="arrow-left" size="0.2188rem" color="#fff" />
      </div>
      <div class="title">北京网络科技</div>
    </div>
    <div class="content">
      <div class="show">
        <div class="top">
          <div class="left">
            <div class="p1">高级交互设计师</div>
            <div class="p2">北京 | 5~10年 | 本科</div>
            <div class="fl">
              <div class="box">全职</div>
              <div class="box">五险一金</div>
              <div class="box">周末双休</div>
              <div class="box">年底分红</div>
            </div>
          </div>
          <div class="right">10~20k/月</div>
        </div>
        <div class="line"></div>
        <div class="bottom">8月8日 13：29 向你发起沟通</div>
      </div>
      <div class="chat">
        <h1>腾讯im的无UI集成api的使用</h1>
        <div>
          <div class="item">
            昵称：<input type="text" v-model="userID" />
            <button @click="login">登录</button>
          </div>
          <div class="send_item">
            <div class="Ipt">
              <input type="text" v-model="msg" placeholder="请输入" />
            </div>
            <div class="btn" @click="sendMsg" >发送</div>
          </div>
        </div>
        <div>
          <ul>
            <li
              class="chat_list"
              v-for="(ele, index) in chatStore.historyChatList"
              :key="index"
            >
              <p :class="ele.flow == 'in' ? 'left' : 'right'">
                <div class="text">{{ ele.from }} : {{ ele.payload.text }}</div>
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Icon } from "vant";
import { ref, watch } from "vue";
import { useChatStore } from "../../store/chat";
import { genTestUserSig } from "../../debug/GenerateTestUserSig";
import im from "../../config/im";
import TencentCloudChat from "@tencentcloud/chat";

const chatStore = useChatStore();
let userID = ref("");

const login = async () => {
  if (!userID.value.trim()) {
    alert("请输入用户昵称");
    return;
  }

  let { userSig } = genTestUserSig({
    SDKAppID: im.SDKAppID,
    secretKey: im.secretKey,
    userID: userID.value,
  });

  // 登录 Chat
  let imResponse = await chatStore.im.login({ userID: userID.value, userSig });
  console.log(imResponse.data); // 登录成功
  if (imResponse.data.repeatLogin === true) {
    // 标识账号已登录，本次登录操作为重复登录。
    console.log(imResponse.data.errorInfo);
  }
};

//监听事件（监听是否登录）
let onSdkReady = function (event) {
  console.log("onSdkReady监听 登陆成功！");
  chatStore.onImReady(true);
};
chatStore.im.on(TencentCloudChat.EVENT.SDK_READY, onSdkReady);

//接收消息
chatStore.im.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, (event) => {
  console.log("发信息过来了");
  let message = event.data[0];
  chatStore.handleReceivedMessage(message);
});

let msg = ref("");

watch(
  () => {
    return chatStore.hasImReady; // 对象的属性
  },
  async (v) => {
    console.log(v);
    if (v) {
      let targetid = "zhangxiaoming";
      let imResponse = await chatStore.im.getMessageList({
        conversationID: "C2Ctest" + targetid,
      });
      // 消息列表
      chatStore.mutaHistoryChatList(imResponse.data.messageList);
      console.log("消息列表", chatStore.historyChatList);
    }
  },
  { deep: true }
);

//发送消息
const sendMsg = async () => {
  if (!chatStore.hasImReady) {
    console.log("系统初始化中...");
    return;
  }
  //封装消息
  let message = chatStore.im.createTextMessage({
    to: "zhangxiaoming",
    conversationType: TencentCloudChat.TYPES.CONV_C2C,
    payload: {
      text: msg.value,
    },
    needReadReceipt: true,
  });
  // 2. 发送消息
  const imResponse = await chatStore.im.sendMessage(message);
  console.log(imResponse);
  // 后期还要把当前发送的消息加入到消息列表
  chatStore.handleReceivedMessage(message);
};

// let message2 = ref("")
// let temp = false
// const send = ()=>{
//     temp = true
//     let message = ref("")
//     console.log(message.value)
//     setTimeout(()=>{
//         console.log("6666666666")
//         message2.value="请问需要什么帮助吗？"
//         console.log(message2.value)
//     },500)
// }
</script>

<style scoped lang="less">
.wrap {
  width: 100%;
  min-height: 100vh;
  background: #f4f4f4;
  .header {
    width: 100%;
    height: 1.1719rem;
    background-color: green;
    position: relative;
    .goback {
      position: absolute;
      bottom: 0.2969rem;
      left: 0.2344rem;
    }
    .title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0.2969rem;
      font-weight: 500;
      font-size: 0.2813rem;
      color: #ffffff;
    }
  }
  .content {
    width: 100%;
    height: 100%;
    padding: 0.2344rem 0.2344rem 100px 0.2344rem;
    .show {
      height: 2.1563rem;
      background-color: #ffffff;
      border-radius: 0.1563rem;
      padding: 0.2344rem;
      box-shadow: 0px 6px 21px 0px rgba(20, 150, 57, 0.22);
      .top {
        display: flex;
        justify-content: space-between;
        .left {
          .p1 {
            font-weight: 700;
            font-size: 0.2813rem;
            color: #333333;
            margin-bottom: 0.2344rem;
          }
          .p2 {
            font-weight: 300;
            font-size: 0.1563rem;
            color: #333333;
            margin-bottom: 0.2344rem;
          }
          .fl {
            display: flex;
            .box {
              font-weight: 300;
              font-size: 0.1563rem;
              color: #333333;
              padding: 0.0469rem;
              background: #f4f4f4;
              border-radius: 0.125rem;
              margin-right: 0.0781rem;
            }
          }
        }
      }
      .line {
        width: 100%;
        height: 1px;
        background: #eeeeee;
        margin-bottom: 0.2344rem;
        margin-top: 0.2344rem;
      }
      .bottom {
        font-weight: 300;
        font-size: 0.1563rem;
        color: #333333;
      }
    }
    .chat {
      margin-top: 30px;
      .send_item{
        width: 100%;
        max-width: 750px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: fixed;
        left: 50%;
        bottom: 50px;
        transform: translateX(-50%);
        background: #fff;
      .Ipt{
          width: 60%;
          height: 30px;
          background-color: f4f4f4;
          line-height: 30px;
          input{
            border: none;
          }
        }
        .btn{
          width: 20%;
          text-align: center;
          color: #149639;
        }
      }
      .right {
        margin-top: 30px;
        display: flex;
        justify-content: flex-end;
        .text{
          background: #7bcf93;
        border-radius: 10px;
        padding: 15px;
        }
      }
      .left {
        margin-top: 30px;
        display: flex;
        justify-content: flex-start;
        .text{
          background: #fff;
        border-radius: 10px;
        padding: 15px;
        }
      }
    }
  }
  .footer {
    max-width: 750px;
    width: 100%;
    margin: 0 auto;
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    input {
      width: 295px;
      height: 30px;
      background: #f4f4f4;
      border-radius: 0.1563rem;
      margin-left: 0.2344rem;
      border: none;
    }
    .text {
      font-weight: 600;
      font-size: 15px;
      color: #149639;
      margin-right: 20px;
    }
  }
}
</style>
